<template>
	
	<view>
		<view class="" v-if="pintuangroupList.length == 0">
				<ns-empty :isIndex="!1" :text="text"></ns-empty>
		</view>
		<mescroll-uni ref="mescroll" @getData="getListData" >
		 	<block slot="list">
				<view class="manage" v-for="(item,index) in pintuangroupList" :key="item.create_time">
					<view class="manage_a">
						<view class="manage_herder">
							<text v-if="item.status == 3" class="text-color">该批发组已批发成功</text>
							<text v-if="item.status == 2">还差<text class="text-color">{{item.pintuan_num - item.pintuan_count}}人</text>拼成</text>
							<text v-if="item.status == 2" style="padding-left: 20rpx;">批发倒计时：</text>
							<text v-if="item.status == 2" class="text-color">{{item.timeShow}}</text>
						</view>
						
						<view class="manage_btn">
							<!-- <button type="default" v-if="item.status == 2" @click="virtualComplete(item.group_id)">一键成团</button> -->
							<button type="default" v-if="item.status == 3" style="background-color: #FF335C;" >已成团</button>
						</view>
					</view>
					
					
					<view class="manage_body">
						
						<view class="manage_body_list" v-for="(ite,idx) in item.buyer_list" :key="ite.id">
							<image :src="$util.img(ite.member_img ==''?'/upload/default/default_img/head.png':ite.member_img)   ">
								<text class="list-boss" v-if="idx==0" >
									<text>团长</text>
								</text>
							</image>
							<text>{{ite.nickname}}</text>
						</view>
						<view class="manage_body_list list_top" v-for="(it,i) in  item.pintuan_num - item.pintuan_count " :key="i">
							<image :src="$util.img('upload/uniapp/platformpintuan/pintuaninit.png')"></image>
						</view>
					</view>
				</view>
				
				
		</block>
		</mescroll-uni>
		<view class="" style="display: none;">{{ num }}</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				surplus:'1',
				pintuangroupList:[],
				pintuan_id:0,
				timeOutObj:null,
				num:0,
				flag:true,
				text:'暂无批发'
			}
		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
		},
		
		onLoad: function (option) { 
		    console.log(option.pintuan_id); //打印出上个页面传递的参数。
			this.pintuan_id =option.pintuan_id
		},

		methods:{
			// 一键拼团	
			virtualComplete(group_id) {
				uni.showModal({
					title: '提示',
					content: '确认一键成团吗',
					success: (res) => {
						if (res.confirm) {
							this.$api.sendRequest({
								url: '/platformpintuan/api/pintuangroup/virtualcomplete',
								data: {
									group_id:group_id,
								},
								success: res => {
									if(res.code == 0){
										this.$util.showToast({
											title: '一键拼团成功'
										});
										this.$refs.mescroll.refresh()
									}
								}
							});
						}else if (res.cancel) {
							console.log('已取消');
						}
					},
				});
			},
			getListData(mescroll) {
				console.log(mescroll);
				// if(this.pintuangroupList.length >= 0){
				// 	this.flag = false
				// }
				let that = this
				// console.log(mescroll.num)
				this.$api.sendRequest({
					url: '/platformpintuan/api/pintuangroup/page',
					data: {
						page: mescroll.num,
						page_size: mescroll.size,
						pintuan_id: this.pintuan_id
					},
					success: res => {
						// console.log(res.list);
						let newArr = [];
						newArr = res.data.list;
						// console.log(newArr);
						// 关闭加载
						mescroll.endSuccess(newArr);	
						
						//设置列表数据
						if (mescroll.num == 1) this.pintuangroupList = []; //如果是第一页需手动制空列表
						newArr.forEach(v => {
							if (v.end_time > res.timestamp) {
								v.timeMachine = this.$util.countDown(v.end_time - res.timestamp);
							} else {
								v.timeMachine = null;
							}
						});
						this.pintuangroupList = this.pintuangroupList.concat(newArr); //追加新数据
						clearTimeout(this.timeOutObj);
						this.getTime();
					}
				});
			
				console.log('pintuan_id='+ this.pintuan_id)
			
			},
			
			getTime(){
				let that = this;
				let list = this.pintuangroupList;
				for(let i in list){
					let item = list[i];
					let curr_time = Math.floor(new Date().getTime() / 1000);
					let end_time = item.end_time;
					if (curr_time < end_time) {
						let time = (end_time - curr_time);
						let day = parseInt(time / (60 * 60 * 24));
						let hou = parseInt((time % (60 * 60 * 24)) / 3600);
						let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
						let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
						let obj = {
							day: day < 10 ? '0' + day : day,
							hou: hou < 10 ? '0' + hou : hou,
							min: min < 10 ? '0' + min : min,
							sec: sec < 10 ? '0' + sec : sec
						};
						let timeShow = '';
					
						timeShow += obj.day + '天';
				
						timeShow += obj.hou + ':' + obj.min + ':' + obj.sec ;
						item.timeShow = timeShow;
					}
				}
				this.pintuangroupList = list;
				this.num ++;
				that.timeOutObj = setTimeout(function(){
					that.getTime();
				}, 1000);
			},
		},
		
		filters: {
			// timeStamp: function(value) {
			// 	if (!value) return '';
			// 	var now = new Date(value);
			// 	console.log("time:" + JSON.stringify(now));
			// 	var year = now.getFullYear();
			// 	var month = now.getMonth() + 1;
			// 	if (month < 10) {
			// 		month = '0' + month
			// 	}
			// 	var date = now.getDate();
			// 	if (date < 10) {
			// 		date = '0' + date
			// 	}
			// 	return year + "-" + month + "-" + date
			// },
			timeStamp: function(value) {
							var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
							var year = date.getFullYear();
							var month = ("0" + (date.getMonth() + 1)).slice(-2);
							var sdate = ("0" + date.getDate()).slice(-2);
							var hour = ("0" + date.getHours()).slice(-2);
							var minute = ("0" + date.getMinutes()).slice(-2);
							var second = ("0" + date.getSeconds()).slice(-2);
							// 拼接
							var result =  hour + ":" + minute + ":" + second;
							// 返回
							return result;
						}
		},
	}
</script>

<style lang="scss" scoped>
	
	.text-color{
		color: #FF4544!important;
	}
	
	page{
		background-color: #F8F8F8;
	}
	.manage{
		margin: 30rpx 32rpx 0 16px;
		background-color: #FFFFFF;
		font-size: 24rpx;
		border-radius: 14rpx;
		.manage_herder{
			padding: 40rpx 0 0 34rpx;
			height: 40rpx;
		
			text{
				font-size: 24rpx;
				height: 40rpx;
			}
			
		}
		.manage_btn{
			display: flex;
			flex-direction: row-reverse;
			margin: -42rpx -22rpx 0 0 ;
			height: 50rpx;
		
			button{
				display: inline-block;
				width: 154rpx;
				height: 50rpx;
				background-color: red;
				font-size: 24rpx;
				line-height: 50rpx;
				color: #FFFFFF;
			}
		}
		.manage_body{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 40rpx 20rpx 0 20rpx;
			.manage_body_list{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-right: 38rpx;
					image{
						width: 80rpx;
						height: 80rpx;
						display: inline-block;
						border-radius: 50rpx;
					}
					text{
						display: flex;
						justify-content: center;
						width: 96rpx;
						font-size: 24rpx;
						line-height: 48rpx;
					}
				.list-boss{
					width: 60rpx;
					height: 29rpx;
					background: #FF4544;
					border-radius: 15rpx;
					text-align: center;
					margin-top: -29%;
					z-index: 9999;
					text{
						font-size: 22rpx;
						line-height: 29rpx;
						color: #FFFFFF;
						transform: scale(0.8);
					}
						
					
				}
			}
			.list_top{
				display: flex;
				justify-content: end;
				// margin-bottom: 20rpx;
			}
		}
	}
</style>
